<template>
  <div>
    <at-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
      <!-- <at-button size="small" type="primary">点击上传</at-button> -->
      <div class="at-upload-warp">
        <div class="at-icon-upload"></div>
        <div class="at-icon-upload-footer">点击上传</div>
      </div>
    </at-upload>
    <div class="at-download-warp">
      <div class="at-icon-download"></div>
      <div class="at-icon-download-footer" @click.stop='Download'>下载模板</div>
    </div>
    <div slot="tip" class="at-upload__tip">备注：只能上传csv文件，且不超过2M</div>

    <div>
      <at-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <i class="at-icon-plus"></i>
      </at-upload>
      <at-dialog title="预览" :visible.sync="dialogVisible" size="view" :top="'10%'">
        <img width="100%" :src="dialogImageUrl" alt="">
      </at-dialog>
    </div>
  </div>
</template>
<script>
export default {
	data() {
		return {
			fileList: [],
			dialogImageUrl: '',
			dialogVisible: false
		};
	},
	methods: {
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(file);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		Download() {
			console.log(11111);
		}
	}
};
</script>